<template>
  <view class="content">
    <!-- <view class="header">
      <view
        :style="{
          height: `calc(${$sys().statusBarHeight}px)`
        }"
      ></view>
      <view
        class="header-left-title"
        :style="{
          top: `${$sys().statusBarHeight}px`
        }"
      >
        <image :src="$img('/static/img2/cc5.png')" mode="scaleToFill" />
      </view>
    </view> -->

    <view class="sw-wrap">
      <swiper
        class="swiper-box"
        :autoplay="true"
        :indicator-dots="false"
        :circular="true"
        :interval="3000"
        @change="swChange"
      >
        <swiper-item class="sw-item" v-for="(v, i) in advert" :key="i" @click="$c.navTo(v)">
          <view class="pic">
            <image class="yh_bg" :src="v.imgurl"></image>
          </view>
        </swiper-item>
      </swiper>

      <!-- <view
        v-if="advert.length && advert[swCur].title"
        class="pic-title c_bg"
        :style="{
          backgroundImage: `url(${$img('/static/img2/cc1.png')})`
        }"
      >
        <view class="title hang1">
          {{ advert[swCur].title }}
        </view>
      </view>

      <view class="sw-dot">
        <view
          class="sw-dot-item"
          v-for="(item, i) in advert"
          :key="i"
          :class="{
            act: swCur == i
          }"
        ></view>
      </view> -->
    </view>

    <view class="class-list">
      <view class="class-item" v-for="(item, i) in classList" :key="i" @click="toClass(item)">
        <view class="icon">
          <image :src="item.imgurl" lazy-load></image>
        </view>

        <view class="title hang1">{{ item.title }}</view>
      </view>
    </view>

    <view class="tab">
      <view
        class="tab-item"
        :class="{
          act: goods_sort == 1
        }"
        @click="clickSort(1)"
      >
        综合推荐
      </view>

      <view
        class="tab-item"
        :class="{
          act: goods_sort == 3 || goods_sort == 4
        }"
        @click="clickSort(2)"
      >
        销量
        <view class="arrow icon">
          <image v-if="goods_sort == 3" :src="$img('/static/img2/cc105.png')" lazy-load></image>

          <image
            v-else-if="goods_sort == 4"
            :src="$img('/static/img2/cc106.png')"
            lazy-load
          ></image>

          <image v-else :src="$img('/static/img2/cc104.png')" lazy-load></image>
        </view>
      </view>

      <view
        class="tab-item"
        :class="{
          act: goods_sort == 5 || goods_sort == 6
        }"
        @click="clickSort(3)"
      >
        价格
        <view class="arrow icon">
          <image v-if="goods_sort == 5" :src="$img('/static/img2/cc105.png')" lazy-load></image>

          <image
            v-else-if="goods_sort == 6"
            :src="$img('/static/img2/cc106.png')"
            lazy-load
          ></image>

          <image v-else :src="$img('/static/img2/cc104.png')" lazy-load></image>
        </view>
      </view>
    </view>

    <mescroll-body
      ref="mescrollRef"
      @init="mescrollInit"
      @down="downCallback"
      @up="getList"
      :down="downOption"
      :up="upOption"
    >
      <view class="list">
        <view
          class="list-item c_bg"
          v-for="(item, i) in listData"
          :key="i"
          :style="{
            'background-image': `url(${$img('/static/img2/cc191.png')})`
          }"
          @click="toDetail(item)"
        >
          <view class="pic">
            <image :src="item.imgurl" lazy-load></image>
          </view>

          <view class="title hang1">
            {{ item.title }}
          </view>

          <view class="price">
            ¥
            <text>{{ item.price }}</text>
          </view>
        </view>
      </view>
    </mescroll-body>

    <tab-bar :index="2"></tab-bar>
  </view>
</template>

<script>
export default {
  data() {
    return {
      advert: [],
      classList: [],
      swCur: 0,
      pageData: '',
      // 下拉刷新的配置(可选, 绝大部分情况无需配置)
      downOption: {
        auto: false
      },
      // 上拉加载的配置(可选, 绝大部分情况无需配置)
      upOption: {
        auto: true,
        page: {
          size: 10 // 每页数据的数量,默认10
        }
      },
      listData: [],

      goods_sort: 1
    }
  },

  onLoad(options) {
    // this.getnews()
  },

  methods: {
    /**
     * 去详情
     */
    toDetail(item) {
      this.$c.to({
        url: '/package/mall/detail',
        query: {
          id: item.id
        }
      })
    },

    /**
     * 去分类
     */
    toClass(item) {
      this.$c.to({
        url: '/package/mall/classify',
        query: {
          id: item.id
        }
      })
    },

    swChange(e) {
      this.swCur = e.detail.current
    },

    /**
     * 筛选
     */
    clickSort(type) {
      if (type == 1) {
        this.goods_sort = 1
      }

      if (type == 2) {
        this.goods_sort = this.goods_sort == 3 ? 4 : 3
      }

      if (type == 3) {
        this.goods_sort = this.goods_sort == 5 ? 6 : 5
      }
      console.log(this.goods_sort)

      this.listData = []
      this.mescroll.resetUpScroll()
      // this.mescroll.scrollTo(0, 0)
    },

    /**
     * @description: 获取列表
     * @param {*} num
     * @param {*} size
     * @return {*}
     */
    getList({ num, size }) {
      this.req({
        url: 'product',
        data: {
          page: num,
          sort: this.goods_sort
        },
        Loading: true,
        success: res => {
          if (res.status == 1) {
            if (num == 1) {
              this.listData = []
            }

            this.advert = res.data.advert
            this.classList = res.data.cate
            this.listData = this.listData.concat(res.data.product.list)
            this.mescroll.endByPage(res.data.product.list.length, res.data.product.last_page)
          }
        }
      })
    },

    getnews() {
      let that = this
      that.req({
        url: 'index',
        success(res) {
          if (res.status == 1) {
            that.advert = res.data.advert
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
.content {
  image {
    width: 100%;
    height: 100%;
    border-radius: inherit;
  }

  .icon {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  // .header {
  //   width: 100%;
  //   position: fixed;
  //   left: 0;
  //   top: 0;
  //   z-index: 10;

  //   .header-left-title {
  //     height: 88rpx;
  //     font-weight: bold;
  //     color: #ffffff;
  //     display: flex;
  //     align-items: center;
  //     padding-left: 26rpx;

  //     image {
  //       width: 202rpx;
  //       height: 42rpx;
  //     }
  //   }
  // }

  .sw-wrap {
    width: 100%;
    height: 440rpx;
    position: relative;

    .swiper-box {
      width: 100%;
      height: 100%;

      .sw-item {
        .pic {
          width: 100%;
          height: 100%;
          position: relative;

          .yh_bg {
            width: 100%;
            height: 100%;
            border-radius: inherit;
          }
        }
      }
    }

    // .pic-title {
    //   width: 100%;
    //   height: 104rpx;
    //   box-sizing: border-box;
    //   position: absolute;
    //   left: 0;
    //   bottom: -46rpx;
    //   z-index: 1;
    //   padding-top: 10rpx;
    //   padding-left: 30rpx;
    //   padding-right: 200rpx;

    //   .title {
    //     font-family: 光良酒-干杯体, 光良酒-干杯体;
    //     font-weight: 400;
    //     font-size: 40rpx;
    //     color: #ffffff;
    //     text-shadow: 0 0 4px #000, 0 0 4px #000, 0 0 4px #000, 0 0 4px #000;
    //   }
    //   .hang1 {
    //   }
    // }
    // .c_bg {
    // }

    // .sw-dot {
    //   display: flex;
    //   justify-content: center;
    //   position: absolute;
    //   right: 30rpx;
    //   bottom: 10rpx;
    //   z-index: 2;

    //   .sw-dot-item {
    //     width: 8rpx;
    //     height: 8rpx;
    //     border-radius: 8rpx;
    //     background: #ff9f9f;
    //     margin: 0 4rpx;
    //     transition: 0.3s;

    //     &.act {
    //       width: 28rpx;
    //       background-color: #fff;
    //     }
    //   }
    // }
  }

  .class-list {
    padding: 1rpx 10rpx 0;
    display: flex;
    flex-flow: row wrap;

    .class-item {
      width: 20%;
      box-sizing: border-box;
      padding: 30rpx 10rpx 0;
      display: flex;
      flex-flow: column nowrap;
      align-items: center;

      .icon {
        width: 104rpx;
        height: 104rpx;
      }

      .title {
        width: 100%;
        padding: 10rpx 0 0;
        text-align: center;

        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #ffffff;
      }
      .hang1 {
      }
    }
  }

  .tab {
    padding: 30rpx 30rpx 0;
    display: flex;

    .tab-item {
      padding: 0 0 10rpx;
      position: relative;
      margin-right: 80rpx;
      display: flex;
      align-items: center;

      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #ffffff;

      &.act {
        color: #e40d1d;

        &::after {
          content: '';
          display: block;
          width: 36rpx;
          height: 4rpx;
          background: #e40d1d;
          border-radius: 304rpx 304rpx 304rpx 304rpx;
          position: absolute;
          left: 50%;
          bottom: 0;
          transform: translateX(-50%);
        }
      }

      .arrow {
        width: 14rpx;
        height: 24rpx;
        margin-left: 8rpx;
      }
    }
    .tab-item {
      .icon {
      }
    }
    .tab-item {
      .arrow {
      }
      .icon {
      }
    }
  }

  .list {
    padding: 1rpx 30rpx 40rpx;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;

    .list-item {
      width: 330rpx;
      box-sizing: border-box;
      margin: 30rpx 0 0;
      padding: 1rpx 0 0;

      .pic {
        margin: 20rpx auto 0;
        width: 310rpx;
        height: 310rpx;
        // border-radius: 10rpx;
      }

      .title {
        padding: 20rpx 20rpx 0;

        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #ffffff;
      }
      .hang1 {
      }

      .price {
        padding: 20rpx;

        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 500;
        font-size: 24rpx;
        color: #ff0013;

        text {
          font-size: 30rpx;
        }
      }
    }
    .c_bg {
    }
  }
}
</style>
